<template>
	<swiper next-margin="60rpx" class="rank_box">
		<swiper-item v-for="(item, index) in part_of_rank" :key="index">
			<view class="sw_item">
				<view class="title">
					<view class="u-font-32">{{item.rank}}</view>
					<play-btn bg="#fff" color="#0a0a0a" txt="播放"></play-btn>
				</view>
				<view v-for="item2 in item.list" :key="item2.id" class="row">
					<view class="info_box">
						<image :src="item2.cover" class="cover" mode="aspectFill"></image>
						<view class="info">
							<view class="u-font-32 u-line-2 name">{{item2.name}}</view>
							<view class=" u-line-2 dec">{{item2.singer}}</view>
						</view>
					</view>
					<play-btn bg="#fff" color="#0a0a0a"></play-btn>
				</view>
			</view>
		</swiper-item>
	</swiper>
</template>

<script>
	export default {
		name: "part-of-rank",
		props: {
			part_of_rank: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			};
		}
	}
</script>

<style lang="scss" scoped>
	.rank_box {
		width: 750rpx;
		height: 660rpx;
		color: #fff;
		.sw_item {
			margin-left: 30rpx;
			height: 100%;
			border-radius: 20rpx;
			background: linear-gradient(90deg, $xj-theme 0%, #86ACF7 100%);
			overflow: hidden;
			.title{
				padding: 10rpx 10rpx 10rpx 20rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
				justify-content: space-between;
			}
			.row {
				padding: 0 20rpx;
				height: 192rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.info_box {
					display: flex;
					align-items: center;

					.cover {
						flex-shrink: 0;
						width: 160rpx;
						height: 160rpx;
						border-radius: 8rpx;
					}

					.info {
						margin-left: 40rpx;

						.name {
							font-weight: bold;
						}
					}
				}
			}
		}
	}
</style>
